<script setup>
import { ref } from 'vue'

const _type = ref('')
const _msg = ref('')
function show(msg, type) {
  _msg.value = msg
  _type.value = type
}

defineExpose({
  show
})
</script>

<template>
  <div v-if="true" class="prompt" :class="[_type]">{{ _msg }}</div>
</template>

<style scoped lang="scss">
.prompt {
  position: fixed;
  top: 30px;
  left: 50%;
  // height: 50px;
  padding: 15px 20px;
  // line-height: 50px;
  box-shadow: 0 0 3px #7a7a7a;
  border-radius: 10px;
  transition: all 0.3s ease;
  transform: translateX(-50%);
  z-index: 66666666666666666;
  animation: show 1s ease forwards, disappear 1s 2s ease forwards;
}

@keyframes show {
  from {
    transform: translateY(-100px) translateX(-50%);
  }
  to {
    transform: translateY(0) translateX(-50%);
  }
}

@keyframes disappear {
  from {
    transform: translateY(0) translateX(-50%);
  }
  to {
    transform: translateY(-100px) translateX(-50%);
  }
}

.normal {
  background-color: var(--theme-color);
}

.success {
  background-color: rgb(199, 234, 199);
}

.error {
  background-color: rgb(241, 163, 163);
}
</style>
